<template>
    <div>
        <div class="form">
            <h5>基本信息</h5>
            <el-form label-position="left" style="width:700px" :rules="rules" ref="ruleForm" label-width="150px" :model="couponInfo">
                <el-form-item prop="name" label="优惠券名称:">
                    <el-input :disabled="disabled" v-model="couponInfo.name" placeholder="请输入优惠券名称"></el-input>
                </el-form-item>
                <el-form-item prop="circulation" label="总发行量:">
                    <el-input :disabled="disabled" v-model="couponInfo.circulation" placeholder="请输入总发行量"></el-input>
                </el-form-item>
                <el-form-item prop="userType" label="指定用户:">
                        <el-checkbox-group v-model="couponInfo.userType">
                            <el-checkbox label="新用户">新用户</el-checkbox>
                            <el-checkbox label="老用户">老用户</el-checkbox>
                        </el-checkbox-group>
                </el-form-item>
                <el-form-item prop="duration" label="优惠券有效期:">
                    <el-radio v-model="couponInfo.duration" :label="1">固定时间</el-radio><el-date-picker
                        style="width:179px;"
                        v-model="couponInfo.start_time"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker> &emsp13; ——— &emsp13; <el-date-picker
                        style="width:179px;"
                        v-model="couponInfo.end_time"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker><br>
                    <el-radio style="margin-right: 8px; margin-top: 25px;" v-model="couponInfo.picker" :label="2">领券当日起</el-radio><el-input style="width: 179px;" :disabled="disabled" v-model="couponInfo.days"></el-input> 天内有效<br>
                    <el-radio style="margin-right: 8px; margin-top: 25px;" v-model="couponInfo.picker" :label="3">领券次日起</el-radio><el-input style="width: 179px;" :disabled="disabled" v-model="couponInfo.days"></el-input> 天内有效
                </el-form-item>
                <el-form-item prop="grant" label="优惠券发放日期：">
                    <template >
                        <el-checkbox-group v-model="couponInfo.grant">
                            <el-date-picker
                                style="width:179px;"
                                v-model="couponInfo.grant"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-checkbox-group>
                    </template>
                </el-form-item>
                <h5 class="other">优惠券类型</h5>
                <el-form-item prop="type" style="margin-left: -150px;" >
                <template>
                    <el-radio-group v-model="couponInfo.type">
                        <!-- 折扣券 -->
                        <el-radio  class="type_radio" :label="0">
                            <span @click="choseType('zk')" style="font-size: 12px;"> 
                                折扣券
                            </span>
                        </el-radio>
                        <span class="radio_item">
                            <el-form-item prop="threshold" label="使用门槛:">
                                <template>
                                    <el-radio :disabled="disabledZ" v-model="couponInfo.couponType.use" label="1">订单满 &emsp;
                                        <el-input  placeholder="请输入" class="type_input" :disabled="disabledZ" v-model="couponInfo.couponType.money"></el-input>
                                        元使用
                                    </el-radio>
                                    <el-radio v-model="couponInfo.couponType.use" label="2" :disabled="disabledZ">无门槛使用</el-radio>
                                </template>
                            </el-form-item >
                            <el-form-item style="margin-top: 24px;" prop="threshold" label="优惠内容:">
                                <template>
                                    &emsp;&emsp13;&emsp13; 折扣额度
                                    <el-input placeholder="请输入折扣" class="type_input" :disabled="disabledZ" v-model="couponInfo.couponType.money"></el-input>
                                    元
                                    <br>
                                    <span style="display:inline-block;margin-top: 22px;">
                                        &emsp;&emsp13;&emsp13; 额度上限
                                        <el-input  placeholder="请输入最多扣除金额" class="type_input" :disabled="disabledZ" v-model="couponInfo.couponType.money"></el-input>
                                        元
                                    </span>
                               
                                </template>
                            </el-form-item>
                        </span>
                        <!-- 抵扣券 -->
                        <el-radio class="type_radio" :label="1">
                            <span @click="choseType('dk')" style="font-size: 12px;"> 
                                抵扣券
                            </span>
                        </el-radio>
                        <span class="radio_item">
                            <el-form-item prop="threshold" label="使用门槛:">
                                <template>
                                    <el-radio :disabled="disabledD" v-model="couponInfo.couponType.use2" label="1">订单满&emsp;
                                        <el-input  placeholder="请输入" class="type_input" :disabled="disabledD" v-model="couponInfo.couponType.money"></el-input>
                                        元使用
                                    </el-radio>
                                    <el-radio v-model="couponInfo.couponType.use2" label="2" :disabled="disabledD">无门槛使用</el-radio>
                                </template>
                            </el-form-item >
                            <el-form-item style="margin-top: 24px;" prop="content" label="优惠内容:">
                                <template>
                                    减免&emsp;&emsp;&emsp;&emsp13;  <el-input  placeholder="请输入" class="type_input" :disabled="disabledD" v-model="couponInfo.content"></el-input>
                                    元
                                </template>
                            </el-form-item >
                        </span>
                    </el-radio-group>
                </template>
            </el-form-item>
                <h5 class="other">规则设置</h5>
                <el-form-item prop="count" label="每人限领次数:">
                    限制 &emsp;&emsp;&emsp;&emsp13;&emsp13;<el-input style="width: 179px;" :disabled="disabled" v-model="couponInfo.count" placeholder="请输入"></el-input> 次
                </el-form-item>
                <el-form-item prop="sheet" label="每人限领张数:">
                    限制 &emsp;&emsp;&emsp;&emsp13;&emsp13;<el-input style="width: 179px;" :disabled="disabled" v-model="couponInfo.sheet" placeholder="请输入"></el-input> 张
                </el-form-item>
                <el-form-item prop="rules" label="规则说明:">
                    <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入规则说明"
                        v-model="textarea">
                    </el-input>
                </el-form-item>
                <div v-if="!$route.query.detail">
                    <el-form-item>
                        <el-button class="cancel" @click="$router.push('/ChargingPile')">取消</el-button>
                        <el-button v-if="$route.query.revise" class="confirm" @click="preserve('ruleForm')">保存</el-button>
                        <el-button v-else class="confirm" @click="submitForm('ruleForm')">确定</el-button>
                    </el-form-item>
                </div>
            </el-form>
          
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                disabled:false,
                disabledZ:false,
                disabledD:false,
                couponInfo:{
                    couponType:{}
                },
                stationOption: [
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:0,
                        label:'丰台产业园悦来电充电站'
                    },
                    {
                        value:1,
                        label:'总部基地悦来电充电站'
                    },
                ],
                typeOption: [
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:0,
                        label:'直流'
                    },
                    {
                        value:1,
                        label:'交流'
                    },
                ],
                gunsOption: [
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:0,
                        label:'单枪充电桩'
                    },
                    {
                        value:1,
                        label:'双枪充电桩'
                    },
                ],
                feeRulesOption:[
                    {
                        value:0,
                        label:'请选择'
                    },
                    {
                        value:1,
                        label:'计费规则'
                    },
                ],
                stateOptions:[
                    {
                        value:null,
                        label:'请选择'
                    },
                    {
                        value:1,
                        label:'启用'
                    },
                    {
                        value:0,
                        label:'禁用'
                    },
                ],
              
                rules: {
                    name: [
                        { required: true, message: '请输入正确的优惠券名称', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    circulation: [
                        { required: true, message: '请输入总发行量', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    duration: [
                        { required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    grant: [
                        { required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    type: [
                        { required: true, message: '请选择优惠券类型', trigger: 'blur' }
                    ],
                    count: [
                        { required: true, message: '请选择枪类型', trigger: 'change' }
                    ],
                    sheet: [
                        { required: true, message: '请输入额定输入电流', trigger: 'blur' }
                    ],
                    rules : [
                        { required: true, message: '请输入规则说明', trigger: 'blur' }
                    ]
                }
            }
        },  
        mounted() {
            if(this.$route.query.detail){
                this.disabled = true
            }
        },
        methods: {
            choseType(text){
                if(text == 'zk'){
                    this.disabledZ = false
                    this.disabledD = true
                } else if(text == 'dk'){
                    this.disabledD = false
                    this.disabledZ = true
                }
            },
            handleChange (value) {
                console.log(value)
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 验证完成
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            preserve(formName) { // 修改
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 验证完成
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
        },
    }
</script>

<style lang="less" scoped>
h5{
    text-align: left;
    font-size: 16px;
    margin-bottom: 24px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
}
.el-input{
    text-align: left;
    width: 528px;
}

.form{
    margin-left: 100px;
    text-align: left;
}
.el-time-select{
    display: inline-block;
    width: 210px;
}
.select{    
    width: 528px;
}
.cancel,.confirm{
    font-size: 16px;
    padding: 14px 54px;
}
.cancel{
    margin-top: 5px;
    font-weight: 600;
    margin-left: 112px;
}
.confirm{
    background: #165bff;
    color: white;
    border: 0;
}
.other{
    margin-top: 32px;
}
.el-textarea__inner {
    background: #f0f1f6 !important;
}
.el-radio{
    margin-right: 22px;
}
.type_radio .el-radio__label {
    font-size: 12px !important;
}
.type_radio{
    margin-bottom: 22px;
}
.type_input{
    width: 179px;
}
div{
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666 !important;
}

</style>
